<!-- subpkg_consult/medicine/timeline/index.vue -->
<script lang="ts" setup>
import { getMedicalOrderLogistics } from '@/apis/order';
import type { ExpressData } from '@/types/order';
import { onMounted } from 'vue';
import { ref } from 'vue';
// #ifdef H5
import AMapLoader from '@amap/amap-jsapi-loader'
import startImg from '@/static/images/start.png'
import endImg from '@/static/images/end.png'
import carImg from '@/static/images/car.png'

// v2.0 需要配置安全密钥jscode
window._AMapSecurityConfig = {
  securityJsCode: 'ae504add6495e6e5f6aa3ae5ef3f4a6d'
}
// #endif


const props = defineProps<{
  id: string
}>()

// 1. 获取物流信息
const express = ref<ExpressData>({} as ExpressData)
const getExpress = async () => {
  if (!props.id) return uni.showToast({ title: '没有订单id', icon: 'none' })
  const res = await getMedicalOrderLogistics(props.id)
  express.value = res
  console.log(express.value)
}

onMounted(async () => {
  await getExpress()
  // #ifdef H5
  AMapLoader.load({
    key: '7ad7e9d1784a9905562e90c73c679503',
    version: '2.0'
  }).then((AMap) => {
    // 1. 使用 Amap 初始化地图
    const map = new AMap.Map("map", {
      zoom: 12, //初始化地图级别
      mapStyle: 'amap://styles/whitesmoke' // 设置地图样式
    });

    // 2. 路线规划
    AMap.plugin('AMap.Driving', () => {
      const driving = new AMap.Driving({
        map: map, // 指定轨迹显示地图实例
        showTraffic: false, // 关闭交通状态
        hideMarkers: true // 隐藏默认图标
      })


      if (express.value.logisticsInfo.length >= 2) {

        const tempArr = [...express.value.logisticsInfo]

        // 开始位置坐标
        const start = tempArr.shift()
        const startLngLat = [start?.longitude, start?.latitude]
        const startMarker = new AMap.Marker({
          icon: startImg, // 设置自定义图片
          position: [start?.longitude, start?.latitude],// 图片显示的坐标位置
          anchor: 'center'
        })
        map.add(startMarker)

        // 结束位置坐标
        const end = tempArr.pop()
        const endLngLat = [end?.longitude, end?.latitude]
        const endMarker = new AMap.Marker({
          icon: endImg, // 设置自定义图片
          position: [end?.longitude, end?.latitude],// 图片显示的坐标位置
          anchor: 'center'
        })
        map.add(endMarker)

        const wayPointsArr = tempArr.map(item => {
          return [item.longitude, item.latitude]
        })
        console.log(wayPointsArr)


        driving.search(startLngLat, endLngLat, {
          waypoints: wayPointsArr
        }, (status: string, result: object) => {
          // 未出错时，result即是对应的路线规划方案
          // console.log(status, result)

          // 绘制车辆
          const carMarker = new AMap.Marker({
            icon: carImg, // 设置自定义图片
            position: [express.value.currentLocationInfo.longitude, express.value.currentLocationInfo.latitude],// 图片显示的坐标位置
            anchor: 'center'
          })
          map.add(carMarker)

          setTimeout(() => {
            map.setFitView([carMarker])
            map.setZoom(10)
          }, 3000)
        })

      }

    })
  })
  // #endif
})
</script>

<template>
  <view class="timeline-page">
    <!-- 加载地图 -->
    <view id="map" class="uni-map"></view>
    <!--  end -->
    <cover-view class="timeline-meta">
      <cover-view class="status">{{ express.statusValue }}</cover-view>
      <cover-view class="extra">
        预计 {{ express.estimatedTime }} 送达
        {{ express.name }}
        {{ express.awbNo }}
      </cover-view>
    </cover-view>
    <view class="timeline-detail">
      <view class="title">物流详情</view>
      <view class="timeline">
        <view class="line">
          <view class="badge text">收</view>
          <view class="content">
            收货地址：广东省广州市大华区明离路科技园880号
          </view>
        </view>
        <view v-for="item in express.list" :key="item.id" class="line">
          <view class="badge dot" v-if="item.status <= 3"></view>
          <view class="badge icon" v-if="item.status === 4">
            <uni-icons color="#2cb5a5" custom-prefix="iconfont" type="icon-truck" />
          </view>
          <view class="badge icon" v-if="item.status === 5">
            <uni-icons custom-prefix="iconfont" color="#2cb5a5" size="15" type="icon-checked" />
          </view>
          <view class="label">{{ item.statusValue }}</view>
          <view class="content">{{ item.content }}</view>
          <view class="time">{{ item.createTime }}</view>
        </view>

      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>